<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset=UTF-8">
		<title>添加竞争对手</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/axios.js"></script>
        <script type="text/javascript" src="../js/qs.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 780px;
				height: 800px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="公司名称" prop="company">
					<el-col :span="22">
						<el-input v-model="form.company"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="客户" prop="custname">
					<el-col :span="22">
						<el-input v-model="form.custname" disabled></el-input>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-autocomplete class="inline-input" v-model="form.custname" :fetch-suggestions="querySearch" placeholder="编号,关键字" @select="handleSelect">
					<template slot-scope="{ item }">
  														  <div class="name">{{ item.cus_name }}({{ item.cus_company}})</div>
												  </template>
					</el-autocomplete>
					<el-button icon="el-icon-search"></el-button>
				</el-form-item>
				<el-form-item label="对应机会">
					<el-col :span="10">
						<el-form-item prop="opp" >
							<template>
							<el-select v-model="form.opp" placeholder="请选择" @change="cha">
								<el-option  v-for="item in opport":key="item.opp_ids":label="item.opp_name":value="item.opp_ids">
							</el-select>
						</template>
						</el-form-item>
					</el-col>
					<el-col :span="9">
						<el-form-item label="竞争能力" prop="nengli">
							<template>
								<el-select v-model="form.nengli" placeholder="请选择">
									<!-- <el-option :size="medium" v-for="item in form.nengliV" :key="item.value" :label="item.label" :value="item.value">
									</el-option> -->
									<el-option :key="3411" label="核心竞争" :value="3411"></el-option>
									<el-option :key="3412" label="有利竞争" :value="3412"></el-option>
									<el-option :key="3413" label="一般竞争" :value="3413"></el-option>
									<el-option :key="3414" label="忽略竞争" :value="3414"></el-option>
								</el-select>
							</template>
						</el-form-item>
					</el-col>
				</el-form-item>

				<el-form-item label="竞争产品" prop="other">
					<el-col :span="22">
						<el-input type="textarea"  placeholder="请输入内容" v-model="form.other">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-col :span="22">
						<el-input v-model="form.price"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="优势" prop="youshi">
					<el-col :span="22">
						<el-input type="textarea"  placeholder="请输入内容" v-model="form.youshi">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="劣势" prop="lieshi">
					<el-col :span="22">
						<el-input type="textarea"  placeholder="请输入内容" v-model="form.lieshi">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="应对策略" prop="celuv">
					<el-col :span="22">
						<el-input type="textarea"  placeholder="请输入内容" v-model="form.celuv">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="备注" prop="more">
					<el-col :span="22">
						<el-input type="textarea"  placeholder="请输入内容" v-model="form.more">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
					<el-button @click="resetForm('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						customertoman:[],
						 opport:[],
						form: {
							comid:'',
							company: '',
							custname: '',
							price:'',
							opp :'',
							nengli :'',
							other: '',
							youshi: '',
							lieshi: '',
							celuv: '',
							more: '',
							oppid:'',
							custid: '',
							restaurants: []
						},
						//验证规则
						rules: { //数据源model
							custname: [{
								required: true,
								message: '请选择客户人',
								trigger: 'blur'
							}],

							degree: [
								{
									required: true,
									message: '请选择程度',
									trigger: 'blur'
								}
							],
							price: [
								{pattern: /^[0-9]*$/, message: '金额格式错误'}
							],
							nengli: [
								{
									required: true,
									message: '请选择程度',
									trigger: 'blur'
								}
							]

						}
					}
				},
				methods: {
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								var ax = null;
								if (JSON.stringify(${addcompetitors}) == '{}') {
									ax = "/addcompetitors";
								}else{
								      ax = "/updatecompetitors";
								}
								//post提交数据
								axios.post(ax,
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
								).then(function(v) {
									window.parent.location.replace("/competitors");
								}).catch(function(e) {
									alert("出错了"+e);
								});
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					querySearch: function(queryString, cb) {
						var allarr = this.form.restaurants;
							var newsarr = [];
							allarr.forEach(v => {
								 var strs =v.cus_name+"";
								 if (strs.indexOf(queryString) >= 0) {
										newsarr.push(v);
										console.info(strs);
										console.info(v);
									} 
							})
							// 调用 callback 返回建议列表的数据
							cb(newsarr);
					},
					handleSelect: function(it) {
						console.log(it.cus_name);
						this.form.custname=it.cus_name;
						this.form.custid=it.cus_id;
						 var iosnn=this;
							//post提交数据
							axios.post("/onSale/findByCoustomerName",
								//参数转换
								Qs.stringify(this.form, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.customertoman = v.data;
								iosnn.opport = v.data.opp;
								console.info(v.data); 
							}).catch(function(e) {
								alert("出错了"+e);
							});
					},
					cha: function(it) {
						this.form.oppid = it;
					}
				},
				
				mounted() {
					//console.log(dic); 
					var mas=${mansitem};
					this.form.restaurants = mas;
					//console.log(this.form.restaurants); 
					var compet = ${addcompetitors};
						if(compet){
							var news = ${addcompetitors};
						}
						console.log(compet);
				     this.form.comid=news.com_id;
					 this.form.company = news.com_name;  
					 this.form.custname = news.cus_cus_name;
					 this.form.custid = news.cus_id;
					 this.form.price =news.cus_id;
					 this.form.opp = news.opp_id;
					 this.form.nengli = news.com_power;
					 this.form.other = news.com_product;
					 this.form.youshi = news.com_advantage;		
					 this.form.lieshi = news.com_disadvantage;	
					 this.form.celuv = news.com_tactics;
					 this.form.more = news.com_remark;
				}  
			});
		</script>
	</body>

</html>